<template>
    <div>
        <div class="reg-header">
            <p class="lh-font">注册</p>
            <p class="regtips">您正在注册bookstore账号</p>
        </div>
        <div>
            <p class="reg-tips">{{registertips}}</p>
        </div>
        <div class="reg-input">
            <div class="accinput"><input type="text" placeholder="昵称" v-model="username" @keyup="check_account()"></div>
            <div><input type="text" placeholder=" 手机号" v-model="phone" @keyup="enter"></div>
            <div class="pwdinput"><input type="password" placeholder="密码" v-model="password" @keyup="enter"></div>
            <div><input type="password" placeholder=" 确认密码" v-model="sure_password" @keyup="enter"></div>
        </div>
        <div class="turntolog" @click="setlogin(true)">
            已有账号？
        </div>
        <div class="reg-but">
            <input type="button" value="注册" @click="check_password()">
        </div>
    </div>
</template>


<script>
import { mapState,mapMutations } from 'vuex'

export default {
  name:'register',
	data() {
		return {
			username: '',
			phone: '',
			password: '',
			sure_password: '',
			timeout: null
		}
	},
    computed: {
        ...mapState('logreg',[
            'registertips',
        ])
    },
    methods: {
		// 检测用户名
		check_account() {
				if(this.timeout){
						clearTimeout(this.timeout)
				}
				this.timeout = setTimeout(() => {
					this.axios.get('/user/'+this.username)
					.then((response) => {
						if (response.status == 200 && response.data.data == true){
							this.setregistertips('用户名已存在')
						}else if(response.status == 200 && response.data.data == false){
							this.setregistertips('')
						}
						else{
							console.log('检测用户名失败'+response.status)
						}
					})
					.catch((err) => {
						console.log(err)
					})
				}, 500);
		},
		// 检测密码和确认密码是否相同
		check_password() {
			// 如果相同,就注册
			if (this.password == this.sure_password){
				this.axios.post('/user/register',{
					username: this.username,
					password: this.password,
					mobile: this.phone
				})
				.then((response => {
					if (response.status == 200 && response.data.code == 200){
						this.add_user({username: this.username})
						this.$messagebox.alert('注册成功','提示')
						this.username = '';
						this.password = '';
						this.phone = '';
						this.sure_password = '';
						this.showlogreg(false)
					}
				}))
			}
			// 如果不相同，就提示
			else{
				this.setregistertips('两次密码必须相同')
			}
		},
		enter(e) {
			if (e.keyCode == 13){
				this.check_password()
			}
		},
        ...mapMutations('logreg',[
            'setlogin',
			'setregistertips',
			'register',
			'showlogreg'
        ]),
		...mapMutations('cart',[
			'add_user'
		])
    },
}
</script>

<style>
div.reg-header {
    margin-bottom: 0px;
    margin-top: 0.5em;
}
p.lh-font {
    font-size: 30px;
    font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
}
p.regtips {
    font-size: 15px;
}
p.reg-tips {
    font-size: 12px;
    color: red;
    padding-left: 100px;
    text-align: left;
    margin-top: 20px;
}
div.reg-input {
    width: 324px;
    height: 100%;
    position: relative;
    margin-left: 78px;
    margin-right: 78px;
    display: inline-block;
}
div.reg-input>div {
    border: 1px solid #96a5b4;
    margin-bottom: 12px;
    border-radius: 5px;
}
div.reg-input>div>input {
    width: 300px;
    height: 40px;
    left: 0px;
    font-family: Verdana,Tahoma,Arial;
    border: none;
}
div.reg-input>div>input:focus {
    outline: none;
    border-bottom: rebeccapurple 0.1px solid;
}
div.reg-but>input {
    cursor:pointer;
    font-size: 20px;
    font-weight: 500;
    font-family: inherit;
    color: white;
    width: 120px;
    height: 50px;
    outline: none;
    background-color: #6ba4e6;
    border: #6ba4e6;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    left: 95px;
    bottom: -10px;
}
div.turntolog {
    display: inline-block;
    position: relative;
    left: -115px;
    bottom: -55px;

    font-size: 15px;
    color: gray;
    cursor:pointer

}
div.reg-but>input:hover {
    width: 125.5px;
    height: 50.5px;
}
</style>